*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "dongporou";
}

li {
  list-style: none;
}

@font-face {
  font-family: dongporou;
  src: url(../fonts/《一碗东坡肉》字体.otf);
}
.wrap{
  position: relative;
  overflow: hidden;
  > div{
    //display: flex;
    display: none;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: 0.4s ease-in;
    > .bc{
      width: 100%;
      background-size: 100%;
    }
  }
  /* 首页样式 */
  > .index{
    display: flex;
    .bc{
      background-image: url(../images/index.png);
      padding-top: 11rem;
      padding-bottom: 7.65rem;
      > .meat{
        height: 5.5rem;
        width: 7.9rem;
        background-image: url("../images/rou.png");
        background-size: 100%;
        margin: 0 auto;
      }
      > .loading{
        color: #782110;
        margin-left: 6.28rem;
        text-transform: uppercase;
        font-size: 0.6rem;
        margin-top: 0.6rem;
        > .dots{
          margin-left: 0.3rem;
        }
      }
      > .percent{
        text-align: center;
        font-size: 0.66rem;
        color: #782110;

        .percentage{
          display: inline-block;
        }
      }
    }
  }

  /* 第二页样式 */
  .page2{
    overflow: hidden;
    .bc{
      position: relative;
      width: 200%;
      background-image: url(../images/图层2.png);
      > .sm-meat{
        position: absolute;
        top: 2.86rem;
        left: 6.46rem;
        > span{
          display: block;
          color: #782110;
          font-size: 0.36rem;
          text-align: center;
          font-weight: 400;
          line-height: 0;
          margin-top: -0.14rem;
        }
      }
      > .word{
        position: absolute;
        top: 6.14rem;
        left: 1.3rem;
        color: #782110;
        font-family: SimHei Regular;
      }
      > .circle{
        position: relative;
        .line{
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%) rotate(260deg);
          transform-origin: bottom;
          height: 50%;
          width: 0.2rem;
        }
        > div{
          border-radius: 50%;
        }
        > .big-circle{
          width: 29.86rem;
          height: 29.82rem;
          border: 0.02rem dashed #743C26;
          border-radius: 50%;
          opacity: 0.5;
        }
        > .middle-circle{
          position: absolute;
          top: 3.24rem;
          left: 3.28rem;
          width: 23.3rem;
          height: 23.3rem;
          opacity: 0.6;
          border: 0.02rem dashed #743c26;
          > .line{
            animation: line1  8s linear infinite;
            @keyframes line1{
              0%{
                transform: translateX(-50%) rotate(260deg);
              }
              100%{
                transform: translateX(-50%) rotate(620deg);
              }
            }
            > .food{
              position: absolute;
              top: -1.74rem;
              left: 50%;
              transform: translate(-50%);
              width: 3.46rem;
              height: 3.48rem;
              background-image: url("../images/葱姜2.png");
              background-size: 100%;
              animation: food1 4s linear infinite;
              @keyframes food1{
                0%{
                  transform: translate(-50%);
                }
                100%{
                  transform: translate(-50%) rotate(360deg);
                }
              }
            }
          }
        }
        > .small-circle1{
          position: absolute;
          top: 6.78rem;
          left: 6.82rem;
          width: 16.24rem;
          height: 16.24rem;
          border: 0.04rem dashed #743c26;
          opacity: 0.7;
          > .line{
            transform: translateX(-50%) rotate(45deg);
            animation: line2 8s linear infinite;
            @keyframes line2{
              0%{
                transform: translateX(-50%) rotate(45deg);
              }
              100%{
                transform: translateX(-50%) rotate(405deg);
              }
            }
            > .food{
              position: absolute;
              left: 50%;
              top: -2.09rem;
              transform: translateX(-50%);
              width: 4.18rem;
              height: 4.18rem;
              background-image: url("../images/猪肉2.png");
              background-size: 100%;
              animation: food1 4s linear infinite;
            }
          }
          > .line2{
            transform: translateX(-50%) rotate(100deg);
            animation: line3 8s linear infinite;
            @keyframes line3{
              0%{
                transform: translateX(-50%) rotate(100deg);
              }
              100%{
                transform: translateX(-50%) rotate(460deg);
              }
            }
            > .food{
              top: -1.84rem;
              width: 3.68rem;
              height: 3.68rem;
              background-image: url("../images/8角.png");
            }
          }
          > .line3{
            transform: translateX(-50%) rotate(225deg);
            animation: line4 8s linear infinite;
            @keyframes line4{
              0%{
                transform: translateX(-50%) rotate(225deg);
              }
              100%{
                transform: translateX(-50%) rotate(585deg);
              }
            }
            .food{
              top: -1.74rem;
              width: 3.46rem;
              height: 3.48rem;
              background-image: url("../images/冰糖2.png");
            }
          }
          > .line4{
            transform: translateX(-50%) rotate(315deg);
            animation: line5 8s linear infinite;
            @keyframes line5{
              0%{
                transform: translateX(-50%) rotate(315deg);
              }
              100%{
                transform: translateX(-50%) rotate(675deg);
              }
            }
            .food{
              top: -1.99rem;
              width: 3.98rem;
              height: 3.98rem;
              background-image: url("../images/黄酒.png");
            }
          }
        }
        > .small-circle2{
          position: absolute;
          top: 9.36rem;
          left: 9.4rem;
          width: 11.08rem;
          height: 11.08rem;
          opacity: 0.8;
          border: 0.06rem dashed #743c26;
          > .meat{
            position: absolute;
            bottom: 1.7rem;
            right: 2.44rem;
            height: 8.18rem;
            width: 11.48rem;
            background-image: url(../images/东坡肉.png);
            background-size: 100%;
          }
        }
      }
    }
  }

  /* 第三页样式 */
  .page3{
    .bc{
      position: relative;
      background-image: url("../images/组 6.png");
      background-size: 100%;
      padding-top: 19.86rem;
      padding-bottom: 3.22rem;
      > .sm-meat{
        position: absolute;
        top: 2.86rem;
        left: 6.46rem;
        > span{
          display: block;
          color: #782110;
          font-size: 0.36rem;
          text-align: center;
          font-weight: 400;
          line-height: 0;
          margin-top: -0.14rem;
        }
      }
      > .words{
        > .word{
          font-size: 1.14rem;
          position: absolute;
          top: 9.32rem;
          left: 1.54rem;
          font-family: SimHei Regular, SimHei Regular-Regular;
          color: #782110;
          > p:nth-child(1){
              letter-spacing: 0.14rem;
            }
          > p:nth-child(2) , p:nth-child(3){
              font-size: 0.76rem;
            }
          > p:nth-child(2){
              margin-top: 2.4rem;
            }
          > p:nth-child(3){
              margin-top: 1.14rem;
              margin-left: 5rem;
            }
        }
        > .word2{
          left: 1.62rem;
          > p:nth-child(1){
            letter-spacing: 0.02rem;
            font-size: 1.12rem;
            line-height: 1.2rem;
          }
          > p:nth-child(2){
            margin-top: 1.16rem;
          }
          > p:nth-child(3){
            margin-left: 5.6rem;
            margin-top: 0.6rem;
          }
        }
        > .word3{
          left: 1.58rem;
          > p:nth-child(1){
            letter-spacing: 0.12rem;
            font-size: 1.12rem;
          }
          > p:nth-child(2){
            margin-top: 1.92rem;
            letter-spacing: 0.044000000000000004rem;
            line-height: 1.04rem;
          }
          > p:nth-child(3){
            margin-top: 1.14rem;
            margin-left: 5.6rem;
          }
        }
      }
      > .choice{
        position: relative;
        z-index: 999;
        display: flex;
        width: 100%;
        height: 3.6rem;
        > div{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          > .pic{
            position: relative;
            width: 3.6rem;
            height: 3.6rem;
            border: 0.04rem solid #9FAB61;
            background-image: url(../images/猪肉.png);
            background-repeat: no-repeat;
            background-size: 100%;
            > .dot{
              position: absolute;
              bottom: -0.2rem;
              left: 0.18rem;
              display: block;
            }
          }
        }
        > div:nth-child(2){
          justify-content: center;
          > .pic{
            background-image: url(../images/葱姜.png);
          }
        }
        > div:nth-child(3){
          justify-content: flex-start;
          > .pic{
            background-image: url(../images/冰糖.png);
          }
        }
      }
      > .arrow{
        position: absolute;
        bottom: 1.66rem;
        left: 50%;
        transform: translateX(-50%);
        width: 1.02rem;
        height: 0.64rem;
        background-image: url(../images/滑动箭头.png);
        background-size: 100%;
        animation: arrow 1s infinite;
        @keyframes arrow{
          0%{
            bottom: 1.66rem;
          }
          100%{
            bottom: 1.26rem;
          }
        }
      }
    }
  }

  /* 第四页样式 */
  .page4{
    .bc{
      position: relative;
      background-image: url("../images/组 2.png");
      background-size: 100%;
      padding-top: 4.74rem;
      padding-bottom: 4.35rem;
      > .poem{
        color: #782110;
        > h3{
          font-size: 1rem;
          font-weight: normal;
          text-align: center;
        }
        > p{
          margin-left: 1.38rem;
          font-size: 0.72rem;
          line-height: 1rem;
        }
        > .author{
          font-size: 0.72rem;
          margin-left: 11.6rem;
          margin-top: 0.8rem;
          margin-bottom: 2.7rem;
        }
      }
      > .meat{
        height: 5.46rem;
        width: 7.9rem;
        background-image: url(../images/rou.png);
        background-size: 100%;
        margin: 0 auto;
      }
      > .method{
        position: absolute;
        bottom: 1.68rem;
        left: 6.3rem;
        text-align: center;
        > a{
          text-decoration: none;
          font-size: 0.6rem;
          font-weight: 200;
          color: #919E56;
          > img{
            height: 0.4rem;
            width: 0.24rem;
          }
        }
      }
    }
  }

  /* BGM样式 */
  .bg-music{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    > .CD{
      position: absolute;
      z-index: 99;
      display: flex;
      justify-content: flex-end;
      width: 100%;
      height: 24rem;
      > .bgm{
        display: none;
        width: 1rem;
        height: 1rem;
        margin-right: 1rem;
        background-image: url(../images/图层52.png);
        background-size: 100%;
        animation: bgm 2s linear infinite;
        animation-play-state: paused;
        @keyframes bgm{
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
}